
<template>
  <div id="catalogue" class="catalogue">
    <el-select v-model="selectedPeriod" size="small" filterable="true" class="select1" style="width:25%;" @change="getSubjects">
      <el-option
        v-for="period in periods"
        :key="period"
        :label="period"
        :value="period"
      ></el-option>
    </el-select>

    <el-select v-model="selectedSubject" size="small" filterable="true" class="select2" style="width:33%;" @change="getGrades">
      <el-option
        v-for="subject in subjects"
        :key="subject"
        :label="subject"
        :value="subject"
      ></el-option>
    </el-select>

    <el-select v-model="selectedGrade" filterable="true" size="small" class="select3" style="width:33%;" @change="getCourses" >
      <el-option
        v-for="g in grades"
        :key="g"
        :label="g"
        :value="g"
      ></el-option>
    </el-select>

    <div class="catalogtree">
      <el-tree
        :data="courseTree"
        :props="defaultProps"
        accordion
        style="width:95% ;  background:#fdfbfb; font-size:15px"
        class="tree"
        empty-text="请选择"
        @node-click="handleNodeClick"
      >
      </el-tree>
    </div>

  </div>

</template>

<script>
import { getCatalog, getCatalogGrade, getCatalogSubject } from '@/api/catalog'

export default {
  props: {
    period: String,
    subject: String,
    grade: String
  },
  data() {
    return {
      periods: [
        '小学',
        '初中',
        '高中'
      ],
      subjects: [],
      grades: [],
      courses: [],
      selectedPeriod: '',
      selectedSubject: '',
      selectedGrade: '',
      searchlabel: '',
      testlabel: '压力',
      numTime: 0,
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: {
    courseTree() {
      // 将courses数组内的数据进行整理，整理成目录树需要的结构，存放在数组m内，最后return
      const m = []
      this.courses.forEach(course => {
        if (m.length === 0) {
          m.push({
            label: course.unit,
            children: []
          })
          const l = m.at(-1)
          if (course.name) {
            l.children.push({ label: course.name })
          }
        } else {
          const i = m.find(item => item.label === course.unit)
          if (i) {
            i.children.push({
              label: course.name
            })
          } else {
            m.push({
              label: course.unit,
              children: []
            })
            const l = m.at(-1)
            if (course.name) {
              l.children.push({ label: course.name })
            }
          }
        }
      })
      return m
    }
  },
  watch: {
  },
  created() {
    this.refreshcatalogue()
    console.log(this.grade)
    getCatalog({
      grade: this.grade,
      subject: this.subject
    }).then(({ data }) => {
      this.courses = data.data
    })
    console.log(this.courses)
    this.computed.courseTree()
  },
  mounted() {
  },
  methods: {
    refreshcatalogue() {
      this.selectedSubject = ''
      this.selectedGrade = ''
      this.selectedPeriod = ''
      this.crouse = []
    },
    handleNodeClick(courseTree) {
      if (courseTree.children) {
        this.searchlabel = ''
      } else {
        this.searchlabel = courseTree.label
      }

      let index
      if (this.searchlabel.indexOf('.1') > 0) {
        index = this.searchlabel.indexOf('.1') + 1
      } else if (this.searchlabel.indexOf('.2') > 0) {
        index = this.searchlabel.indexOf('.2') + 1
      } else if (this.searchlabel.indexOf('.3') > 0) {
        index = this.searchlabel.indexOf('.3') + 1
      } else if (this.searchlabel.indexOf('.4') > 0) {
        index = this.searchlabel.indexOf('.4') + 1
      } else if (this.searchlabel.indexOf('.5') > 0) {
        index = this.searchlabel.indexOf('.5') + 1
      } else if (this.searchlabel.indexOf('节') > 0) {
        index = this.searchlabel.indexOf('节')
      } else if (this.searchlabel.indexOf('课') > 0) {
        index = this.searchlabel.indexOf('课')
      } else if (this.searchlabel.indexOf('1') >= 0) {
        index = this.searchlabel.indexOf('1')
      } else if (this.searchlabel.indexOf('2') >= 0) {
        index = this.searchlabel.indexOf('2')
      } else if (this.searchlabel.indexOf('3') >= 0) {
        index = this.searchlabel.indexOf('3')
      } else if (this.searchlabel.indexOf('4') >= 0) {
        index = this.searchlabel.indexOf('4')
      } else if (this.searchlabel.indexOf('5') >= 0) {
        index = this.searchlabel.indexOf('5')
      } else if (this.searchlabel.indexOf('6') >= 0) {
        index = this.searchlabel.indexOf('6')
      } else if (this.searchlabel.indexOf('7') >= 0) {
        index = this.searchlabel.indexOf('7')
      } else if (this.searchlabel.indexOf('8') >= 0) {
        index = this.searchlabel.indexOf('8')
      } else if (this.searchlabel.indexOf('9') >= 0) {
        index = this.searchlabel.indexOf('9')
      } else {
        index = -1
      }

      this.searchlabel = this.searchlabel.slice(index + 1)
      this.$router.push({
        path: '/Search',
        query: {
          q: this.searchlabel
        }
      })
    },
    getSubjects() {
      this.selectedGrade = ''
      this.selectedSubject = ''
      getCatalogSubject(this.selectedPeriod).then(({ data }) => {
        this.subjects = data.data
      })
    },
    getGrades() {
      this.selectedGrade = ''
      getCatalogGrade({
        period: this.selectedPeriod,
        subject: this.selectedSubject
      }).then(({ data }) => {
        this.grades = data.data
      })
    },
    getCourses() {
      getCatalog({
        grade: this.selectedGrade,
        subject: this.selectedSubject
      }).then(({ data }) => {
        this.courses = data.data
      })
    }
  }

}
</script>

<style scoped>
.select1{
  width: 6px;
}
.catalogtree{
  position:relative;
  top:30px;
  line-height: 2rem;

  background:#fdfbfb;

}
.tree{
  line-height:30px
}
.el-select{
  font-size:1px
}

</style>
